<template>
	<view>
		<!-- 定位  -->
		<view class="location" @click="locationClick">
			<uni-icons type="location" size="20"></uni-icons>
			<text>东莞理工学院</text>
		</view>


		<!-- 公告 -->
		<view class="notice">
			<u-notice-bar :text="noticeList" direction="column" bgColor="#ffffff" color="#3c9cff"></u-notice-bar>
		</view>


		<!-- 轮播图 -->
		<view class="swiper">
			<u-swiper :list="swiperList" previousMargin="20" nextMargin="20" circular autoplay="true" interval=3000
				radius="5" bgColor="#ffffff" @click="swiperClick">
			</u-swiper>
		</view>


		<!-- 分类导航 -->
		<view class="nav-list">
			<navigator class="nav-item" v-for="(item) in navList" :key="item.id" :url="item.url">
				<image :src="item.img" class="nav-img"></image>
				<text>{{item.text}}</text>
			</navigator>
			<view class="nav-item">
				<button open-type="feedback" class="btnfeedback" >
					<image src="https://i.imgtg.com/2023/04/26/IjVwB.png" class="nav-img"></image>
					<text>意见反馈</text>
				</button>
			</view>
		</view>


		<view class="splitText">~~~~~优质内容~~~~~</view>


	</view>
</template>

<script>
	// 导入自己封装的 mixin 模块
	import badgeMix from '@/mixins/tabbar-badge.js'
	export default {
		// 将 badgeMix 混入到当前的页面中进行使用
		mixins: [badgeMix],
		data() {
			return {
				// 定位


				// 公告
				noticeList: [
					" 懒人服务开张啦！！！",
					" 快来跳蚤市场淘宝啦！！！"
				],

				// 获取轮播图 
				swiperList: [
					"https://i.imgtg.com/2023/04/26/I95up.png",
					"https://i.imgtg.com/2023/04/26/I9oNx.jpg",
					"https://i.imgtg.com/2023/04/26/I9qLj.png"
				],
				swiperUrl: [
					"/subpkg/LostAndFound/LostAndFound",
					"/subpkg_lazyService/lazyService/lazyService",
					"/subpkg_idleMarket/idleMarket/idleMarket"
				],


				// 获取分类导航
				navList: [{
						id: 1,
						img: "https://i.imgtg.com/2023/04/26/IjSYP.png",
						url: "/subpkg_lazyService/lazyService/lazyService",
						text: "懒人服务"
					},
					{
						id: 2,
						img: "https://i.imgtg.com/2023/04/26/IjsSg.png",
						url: "/subpkg_LostAndFound/home/home",
						text: "失物招领"
					},
					{
						id: 3,
						img: "https://i.imgtg.com/2023/04/26/IjdAl.png",
						url: "/subpkg_idleMarket/idleMarket/idleMarket",
						text: "跳蚤市场"
					},
					{
						id: 4,
						img: "https://i.imgtg.com/2023/04/26/Ijc5b.png",
						url: "/subpkg_lazyService/lazyService/lazyService",
						text: "校园论坛"
					},
					{
						id: 5,
						img: "https://i.imgtg.com/2023/04/26/IjQm6.png",
						url: "/subpkg/lazyService/lazyService",
						text: "交友盲盒"
					},
				],

				// 获取楼层数据
				floorList: []
			};
		},
		onLoad() {


			// this.getSwiperList()

			// this.getNavList()
			// this.getFloorList()
		},
		methods: {
			// 定位点击
			locationClick(e) {

				uni.navigateTo({
					url: '/subpkg/getLocations/getLocations'
				})
			},

			// 轮播图
			swiperClick(e) {
				uni.navigateTo({
					url: this.swiperUrl[e]
				})
			},

			gotoSearch() {
				uni.navigateTo({
					url: '/subpkg/search/search'
				})
			},
			// async getSwiperList() {
			// 	// data 重命名为 res
			// 	const {
			// 		data: res
			// 	} = await uni.$http.get('/api/public/v1/home/swiperdata')

			// 	// 请求失败
			// 	if (res.meta.status !== 200) return uni.$showMsg()
			// 	// 请求成功
			// 	this.swiperList = res.message
			// 	console.log(res.message)
			// 	// uni.$showMsg('数据加载成功', 1500)
			// },

			// async getNavList() {
			// 	const {
			// 		data: res
			// 	} = await uni.$http.get('/api/public/v1/home/catitems')

			// 	if (res.meta.status !== 200) return uni.$showMsg()

			// 	this.navList = res.message
			// 	console.log(res.message)
			// }

			// async getFloorList() {
			// 	const {
			// 		data: res
			// 	} = await uni.$http.get('/api/public/v1/home/floordata')
			// 	if (res.meta.status !== 200) return uni.$showMsg()

			// 	// 通过双层 forEach 循环，处理 URL 地址
			// 	res.message.forEach(floor => {
			// 		floor.product_list.forEach(prod => {
			// 			prod.url = '/subpkg/floor_detail/floor_detail?' +
			// 				prod.navigator_url.split('?')[1]
			// 		})
			// 	})

			// 	this.floorList = res.message
			// 	console.log(res.message)
			// },
		},
	}
</script>

<style lang="scss">
	// 定位
	.location {
		margin: 5px 5px;
	}

	// 轮播图
	.swiper {
		width: 100%;
		height: 100%;
	}

	// 分类导航
	.nav-list {
		// display: flex;
		// justify-content: space-around;
		margin: 15px 0;		
		height: 400rpx;
		display: flex;
		flex-wrap: wrap;
		// border-top: 1rpx solid #efefef;
		// border-left: 1rpx solid #efefef;

		.nav-img {
			width: 60rpx;
			height: 60rpx;
		}
	}

	.nav-item {
		width: 33.33%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		// border-bottom: 1rpx solid #efefef;
		// border-right: 1rpx solid #efefef;
		// box-sizing: border-box;
	}

	.nav-item text {
		margin-top: 20rpx;
	}

	// 按钮
	.btnfeedback {
		margin-top: 15rpx; 
		// height: 400rpx;
		background-color: #fff;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		image {
			// margin-top: 10rpx;
		}
		text{
			margin-top: 2rpx;
			font-size: 32rpx;
		}
	}

	button::after {
		border: 0;
	}

	// “优质内容”
	.splitText {
		display: flex;
		justify-content: center;
		font-family: "微软雅黑";
		font-size: 30rpx;
		color: #adadad;
		opacity: 0.4;
	}
</style>